<script setup lang="ts">
import {ref, watch} from "vue";
let props = defineProps(['showMod', 'title','width']);
let emits = defineEmits(['result']);
let show = ref(false);
watch(() => props.showMod, (newVal) => {
  show.value = newVal;
})

const close = () => {
  emits('result', false)
}
const confirm = () => {
  emits('result', true)
}
</script>

<template>
  <el-dialog :z-index="20" v-model="show" :title="title" @close="close" :close-on-click-modal="false" style="border-radius: 20px" :width="props.width?props.width:'400'">
    <slot></slot>
    <slot name="bottom" >
      <div class="dialog_footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confirm()">确定</el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<style scoped lang="scss">


.dialog_footer {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 10px;
}

</style>